<template>
	<view class="mian">
		<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="80">
			<view class="uni_form">
				<uni-forms-item required label="联系姓名">
					<uni-easyinput v-model="baseFormData.username" placeholderStyle="font-size:28rpx;"
						placeholder="请输入您的名字" />
				</uni-forms-item>
				<uni-forms-item required label="联系手机">
					<uni-easyinput v-model="baseFormData.phone" type="number" placeholderStyle="font-size:28rpx;"
						placeholder="请输入您的手机号" maxlength="11" />
				</uni-forms-item>
				<uni-forms-item required label="所在地区">
					<AreaAddress ref="addressRef" :address_obj="addressValue"></AreaAddress>
				</uni-forms-item>
				<uni-forms-item required label="详细地址" style="margin-bottom: 0;">
				</uni-forms-item>
				<view class="message">
					<textarea maxlength="200" placeholderStyle="font-size:28rpx;" placeholder="请输入您的详细地址"
						:auto-height="true" :autosize='false' v-model="baseFormData.address" />
					<p style="text-align: right;font-size: 24rpx; color: #999; padding: 4px;">
						{{baseFormData.address.length}}/200
					</p>
				</view>
			</view>
			<!-- 	<view class="discern_in" v-if="isNew">
				<uni-easyinput v-model="msg" autosize type="textarea" maxlength="70" placeholder="粘贴文本自动识别姓名、手机、地址"
					:inputBorder="false" />
				<view class="btn_btn">
					<view class="max_text">
						{{msg.length}}/70
					</view>
					<button type="primary" class="btn_btn_ia">智能识别</button>
				</view>
			</view> -->
			<view class="default">
				<span class="tip">设为默认地址</span>
				<radio :checked="baseFormData.mainContact" color="#007cff" style="transform: scale(0.9);"
					@click="baseFormData.mainContact=!baseFormData.mainContact">
				</radio>
			</view>
			<view class="delete_adrs" v-if="!isNew" @click="deleteItem">
				<span class="tip">删除地址</span>
			</view>
		</uni-forms>
		<view class="btn_word">
			<button type="primary" class="btn_bor" @click="onSave">保存</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import AreaAddress from '@/components/u-network/AreaAddress.vue'
	import apiAddress from '@/util/network_api/address.js';
	import store from '@/store_network/index.js'
	const baseFormData = ref({
		"address": "",
		"area": "",
		"city": "",
		"email": "",
		"id": null,
		"mainContact": false,
		"phone": "",
		"province": "",
		"town": "",
		"username": ""
	})
	const addressValue = ref()
	const addressRef = ref() //地址组件元素
	const msg = ref('') //识别地址内容
	const isNew = ref(true) //判断是修改，新建
	// 通过onLoad接收数据
	onLoad((e) => {
		if (e.item) {
			let val = JSON.parse(e.item)
			isNew.value = false
			baseFormData.value = val
			addressValue.value = {
				"province": val.province, //省
				"city": val.city, //市
				"area": val.area, //区
				"town": val.town, //镇
			}
		} else {
			isNew.value = true
		}
	})
	// 保存
	const onSave = async () => {
		if (!baseFormData.value.username) {
			uni.showToast({
				title: '请输入联系人姓名!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!/^1[^1^2]\d{9}$/.test(baseFormData.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!addressRef.value.address.area) {
			uni.showToast({
				title: '请选择地址!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!baseFormData.value.address) {
			uni.showToast({
				title: '请输入详细地址!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		baseFormData.value = {
			...baseFormData.value,
			...addressRef.value.address
		}
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiAddress.saveUserContactAddress(baseFormData.value).then(async res => {
			uni.hideLoading()
			if (res.code == 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				let userId = baseFormData.value.id == res.data.id ? '' : res.data.id
				// 更新地址列表
				await store.dispatch('seleAddress', 1)
				var pages = getCurrentPages();
				if(pages.slice().reverse()[1].route=='pages_network/home/addOrder/add'){
					store.commit('set_is_new_addressItemId', userId)
				}else{
					store.commit('set_is_new_addressItemId', '')
				}
				uni.navigateBack({
					delta: 1
				});
			}
		})

	}
	//删除地址
	const deleteItem = async () => {
		uni.showModal({
			title: '提示',
			content: '确定要删除吗？',
			confirmText: '删除',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						mask: true,
						title: "加载中..."
					})
					await apiAddress.deleteUserContactAddress(baseFormData.value.id).then(
						async res => {
							uni.hideLoading()
							if (res.code == 20000) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								// 更新地址列表
								await store.dispatch('seleAddress', 1)
								uni.navigateBack({
									delta: 1
								});
							}
						})

				} else if (res.cancel) {
				}
			}
		});

	}
</script>

<style lang="scss" scoped>
	.mian {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		padding: 24rpx;
		box-sizing: border-box;

		:deep(.uni-forms-item__label) {
			font-size: 28rpx;
		}

		:deep(.uni-modal__bd) {
			color: #F56C6C !important;
		}

		:deep(.uni-modal__btn_primary) {
			color: #F56C6C !important;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 28rpx !important;
		}



		.uni_form {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx 24rpx;

			:deep(.btn_input) {
				display: flex;
				align-items: center;
				height: 35px;
				border-bottom: solid 1px #eee;
				width: 100%;

				.uniui-bottom::before {
					color: #999;
					font-size: 14px;
				}

				.icon {
					top: -20%
				}
			}

			:deep(.uni-forms-item) {

				margin-bottom: 24rpx;

				.item_zip {
					display: flex;
					align-items: center;

				}
			}

			:deep(.is-input-border) {
				border: none;
				border-bottom: 1rpx solid transparent;
				border-radius: 0;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.message {
				border: solid 1px #eee;
				margin-bottom: 24rpx;

				:deep(textarea) {
					font-size: 28rpx;
					width: 100%;
					min-height: 100rpx;
					padding: 8rpx 12rpx;
					min-height: 100rpx;
				}
			}
		}

		.discern_in {
			background-color: #fff;
			padding: 20rpx;
			position: relative;
			border-radius: 20rpx;
			margin: 24rpx;

			.btn_btn {
				position: absolute;
				right: 20rpx;
				bottom: 32rpx;
				display: flex;
				align-items: center;

				.max_text {
					color: #999;
					font-size: 24rpx;
					margin-right: 10rpx;
				}

				.btn_btn_ia {
					border-radius: 50rpx;
					font-size: 22rpx;
					background-color: #007cff;
					border-color: #007cff;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 10rpx;
				}

				:deep(button::after) {
					border: none;
				}
			}
		}



		.default {
			background-color: #fff;
			border-radius: 4rpx;
			padding: 20rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 24rpx 0;

			.tip {
				font-size: 28rpx;
				color: #606266;
			}
		}

		.delete_adrs {
			background-color: #fff;
			border-radius: 4rpx;
			margin: 24rpx 0;
			padding: 24rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #F56C6C;
		}

		.btn_word {
			padding: 50rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			z-index: 2;

			:deep(button:after) {
				border: none !important;
			}

			.btn_bor {
				width: 50%;
				font-size: 28rpx;
				border-radius: 50rpx;
				background-color: #007cff;
			}
		}
	}
</style>